const path = require("path");
let webpack = require("webpack");
// 提取文本插件
let ExtractTextPlugin = require("extract-text-webpack-plugin");
// 这是一个webpack插件，可以简化HTML文件的创建，为您的webpack包提供服务。
// 这对于webpack包来说是非常有用的，它包含了一个改变每个编译文件的文件名。
// 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板或者使用你自己的loader。
let HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const glob = require("glob");


// 检索所有的静态页面的脚本
let fpath = "./src/js/entry";
// 当前项目下所有js文件
let files = fs.readdirSync(fpath);
let newEntries = {};
let arrEntries = [];

let JsDir = path.join(__dirname, fpath);

console.log(JsDir)
let JsDistBase = path.join(__dirname, "dist");

readJsFile(JsDir);

// 读取js所在目录
function readJsFile(dir) {
  let scriptss = fs.readdirSync(dir);
  scriptss.forEach(function (f) {
    // 遍历获取所有当前目录
    let currentPath = path.join(dir, f);
    let stat = fs.lstatSync(currentPath);
    if (stat.isDirectory()) {
      readJsFile(currentPath);
    } else {
      if (currentPath.indexOf(".js") >= 0) {
        f = f.replace(".js", "");
        // 查找js文件与与之对应页面的相对路径
        let redistpath = path.relative(currentPath, JsDistBase);
        let resrcpath = path.relative(JsDir, currentPath);
        resrcpath = resrcpath.replace(/\\/g, "/");
        resrcpath = resrcpath.substring(0, resrcpath.length - 3);
        let file = resrcpath + "/" + f;
        // 新的入口文件
        newEntries[resrcpath] = fpath + "/" + resrcpath;
        arrEntries.push(resrcpath);
      }
    }
  });
}


let webpackConfig = {
  devtool: 'inline-source-map',

  entry: newEntries, // js文件输出以及输入路径
  output: {
    path: path.join(__dirname, "dist"), // 输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它(output 目录对应一个绝对路径)
    publicPath: "/dist", // 模板、样式、脚本、图片等资源对应的server上的路径
    filename: "js/[name].js", // 每个页面对应的主js的生成配置
    chunkFilename: "js/[id].chunk.js" // chunk生成的配置
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, //一个匹配loaders所处理的文件的拓展名的正则表达式
        exclude: /(node_modules|bower_components)/,
        use: [
          //使用到的loader及其配置
          {
            loader: "babel-loader", //使用的加载器名称，-loader后缀不能省略；也可通过?query设置参数
            options: {
              //为当前loader设置的参数,对于babel可以提取出单独放在.babelrc文件中;
              presets: ["es2015"]
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        exclude: /(node_modules)/, //手动添加必须处理(include)或屏蔽不需要处理的文件（文件夹）
        use: ExtractTextPlugin.extract([
          {
            loader: "css-loader",
            options: {
              minimize: true,
              "-autoprefixer": true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: () => [require("autoprefixer")]
            }
          },
          {
            loader: "sass-loader"
          }
        ])
      },
      {
        test: /\.(png|gif|jpg|svg)$/,
        use: "url-loader?limit=20480&name=assets/[name]-[hash].[ext]"
      }
    ]
  },
  plugins: [
    // new webpack.DllReferencePlugin({
    //   context: __dirname,
    //   manifest: require('./manifest.json'),
    // }),
    // extractSass,
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendors", // 将公共模块提取，生成名为`vendors`的chunk
      chunks: arrEntries, // 提取哪些模块共有的部分
      minChunks: 3 // 提取至少3个模块共有的部分
    }),
    new ExtractTextPlugin("./css/[name].css"), // 单独使用link标签加载css并设置路径，相对于output配置中的publickPath
    // new webpack.HotModuleReplacementPlugin() // 热加载
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ],

  devServer: {
    host: 'localhost',
    contentBase: "./",
    port: 10080,
    inline: true,//实时刷新
  },
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  }
}


//检索所有的静态页面
let htmlpath = "./pages/";
let newhtmls = [];

let pageDir = path.join(__dirname, htmlpath);
let pageDistBase = path.join(__dirname, "dist");

readHtmldir(pageDir);

function readHtmldir(dir) {
  let htmls = fs.readdirSync(dir);
  htmls.forEach(function (f) {
    let currentPath = path.join(dir, f);
    let stat = fs.lstatSync(currentPath);
    if (stat.isDirectory()) {
      readHtmldir(currentPath);
    } else {
      let redistpath = path.relative(currentPath, pageDistBase);
      let resrcpath = path.relative(pageDir, currentPath);

      let scr = resrcpath
        .split(path.sep)
        .join("/")
        .replace(path.extname(resrcpath), "");
      newhtmls.push({
        src: currentPath,
        dist: path.join(currentPath, redistpath, resrcpath),
        script: scr
      });
    }
  });
}

newhtmls.forEach(function (one, index) {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: one["dist"], // 生成的html存放路径，相对于path
      template: one["src"], // html模板路径
      inject: "body", // js插入的位置，true/'head'/'body'/false
      hash: true, // 为静态资源生成hash值
      chunks: ["vendors", one["script"]], // 需要引入的chunk，不配置就会引入所有页面的资源
      minify: {
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true // 删除空白符与换行符
      }
    })
  );
});

module.exports = webpackConfig;